<template>
  <div style="height:100%;height: 100%;background: rgb(236, 236, 236);">
    <div style="width: 100%; height:100%; margin: 0 auto;">
      <div style="text-align: right;padding-top: 10px">
        <a-button type="primary" style="margin-bottom: 10px;" @click="acceptRecord(-1,'全部验收记录')">全部验收记录</a-button>
      </div>
      <div style="background: #ececec;">
        <a-card v-for="(item,index) in this.projectAndAcceptList" :key="index" :title="item.acceptTypeName" style="width: 100%;margin-bottom: 10px">
          <div v-if="item.projectAndAccept != null">
            <div style="float: right">
              <img src="@/assets/pass.png" style="width: 50%;height: 50%;float: right" v-if="item.projectAndAccept.acceptResult == 0">
              <img src="@/assets/notpass.png" style="width: 50%;height: 50%;float: right" v-if="item.projectAndAccept.acceptResult == 1">
            </div>
            <span>验收状态：<a-tag color="green">已验收</a-tag></span><br>
            <span>是否延期：<span style="color: #a9a9a9">{{item.projectAndAccept.isDelay == 0?'是':'否'}}</span></span><br>
            <span>是否需要整改：<span style="color: #a9a9a9">{{item.projectAndAccept.isRectify == 0?'需要':'不需要'}}</span></span><br>
            <span>整改内容：<span style="color: #a9a9a9">{{item.projectAndAccept.rectifyContent}}</span></span><br>
            <span>整改截止时间：<span style="color: #a9a9a9">{{item.projectAndAccept.rectifyEndTime}}</span></span><br>
            <span>是否合格：<span style="color: #a9a9a9">{{item.projectAndAccept.isQualified == 0?'合格':'不合格'}}</span></span><br>
            <span v-show="item.projectAndAccept.acceptResult == 0" style="font-weight: bold">验收结果：<span style="color: green;font-weight: bold">通过</span></span><br v-show="item.projectAndAccept.acceptResult == 0">
            <span v-show="item.projectAndAccept.acceptResult != 0" style="font-weight: bold">验收结果：<span style="color: red;font-weight: bold">未通过</span></span><br v-show="item.projectAndAccept.acceptResult != 0">
            <span v-if="item.projectAndAccept.isHandle == 3">
              客户签字：<br>
              <img :src="item.projectAndAccept.signUrl" style="width: 100px;height: 50px" @click="handlePreview(item.projectAndAccept.signUrl,[item.projectAndAccept.signUrl])">
            </span><br v-show="item.projectAndAccept.isHandle == 3">
            <span v-if="item.projectAndAccept.imgUrl!=null && item.projectAndAccept.imgUrl!=''" style="margin-bottom: 15px">
              图片：<br>
              <img style="width: 100px;height: 100px;margin-right: 10px" v-for="(img,imgIndex) in item.projectAndAccept.imgArr" @click="handlePreview(img,item.projectAndAccept.imgArr)" :key="imgIndex" :src="img">
            </span><br v-if="item.projectAndAccept.imgUrl!=null && item.projectAndAccept.imgUrl!=''">
            <span v-if="item.projectAndAccept.videoUrl!=null && item.projectAndAccept.videoUrl != ''">
              视频：<br>
              <video style="width: 10%;height: 10%;margin-right: 10px;margin-bottom: 5px;background: black;opacity: 0.9" :src="v" v-for="(v,vIndex) in item.projectAndAccept.videoArr" :key="vIndex" @click="play(v)"></video>
            </span>
          </div>
          <div>
            <div style="float: left;" v-if="item.projectAndAccept != null">
              <span>验收人：{{item.projectAndAccept.createBy }}</span><br>
              <span>验收时间：{{item.projectAndAccept.createTime }}</span>
            </div>
            <div style="float: right">
              <a @click="addProjectAccept(item.id, item.acceptTypeName)" v-has="'customer:addProjectAccept'">添加验收</a>
              <a-divider type="vertical" v-if="item.projectAndAccept != null" />
              <a v-if="item.projectAndAccept != null" @click="acceptRecord(item.id)">验收记录</a>
              <a-divider type="vertical" v-if="item.projectAndAccept != null && item.projectAndAccept.acceptResult == 0 && item.projectAndAccept.isHandle == 1"/>
              <a @click="sendSms(item.projectAndAccept)" v-if="item.projectAndAccept != null && item.projectAndAccept.acceptResult == 0 && item.projectAndAccept.isHandle == 1">短信推送</a>
              <a-divider type="vertical" v-if="item.projectAndAccept != null && item.projectAndAccept.qrCodeUrl != null && item.projectAndAccept.qrCodeUrl !== ''" />
              <a @click="handlePreview(item.projectAndAccept.qrCodeUrl,[item.projectAndAccept.qrCodeUrl])" v-if="item.projectAndAccept != null && item.projectAndAccept.qrCodeUrl != null && item.projectAndAccept.qrCodeUrl !== ''">验证码</a>
            </div>
          </div>
          <div v-if="item.projectAndAccept == null">
            <span>验收状态：<a-tag color="red">未验收</a-tag></span><br>
          </div>
        </a-card>
      </div>
    </div>

    <a-drawer
      title="验收记录"
      placement="right"
      width="100%"
      :closable="true"
      :visible="visible"
      @close="onClose"
      style="z-index: 100;">
      <a-timeline style="margin-top: 10px">
        <a-timeline-item v-for="(item,index) in this.projectAcceptRecords" :key="index" >
          <a-card  :title="'验收时间：'+item.createTime" style="width: 100%">
            <div>
              <span style="font-weight: bold;color: black">验收类型：{{item.acceptTypeName}}</span><span style="color: #a9a9a9" v-if="item.acceptResult == 2">已撤销</span><br>
              <span>是否延期：<span style="color: #a9a9a9">{{item.isDelay == 0?'是':'否'}}</span></span><br>
              <span>是否需要整改：<span style="color: #a9a9a9">{{item.isRectify == 0?'需要':'不需要'}}</span></span><br>
              <span>整改内容：<span style="color: #a9a9a9">{{item.rectifyContent}}</span></span><br>
              <span>整改截止时间：<span style="color: #a9a9a9">{{item.rectifyEndTime}}</span></span><br>
              <span>是否合格：<span style="color: #a9a9a9">{{item.isQualified == 0?'合格':'不合格'}}</span></span><br>
              <span v-show="item.acceptResult == 0" style="font-weight: bold">验收结果：<span style="color: green;font-weight: bold">通过</span></span><br v-show="item.acceptResult == 0">
              <span v-show="item.acceptResult == 1" style="font-weight: bold">验收结果：<span style="color: red;font-weight: bold">未通过</span></span><br v-show="item.acceptResult == 1">
              <span v-if="item.isHandle == 3">
                客户签字：<br>
                <img :src="item.signUrl" style="width: 100px;height: 50px;margin-left: 5px" @click="handlePreview(item.signUrl,[item.signUrl])">
              </span><br v-show="item.isHandle == 3">
              <span v-if="item.imgUrl!=null && item.imgUrl!=''" style="margin-bottom: 5px">
                图片：<br/>
                <img style="width: 100px;height: 100px;margin-left: 5px;margin-bottom: 10px" v-for="(img,imgIndex) in item.imgArr" :key="imgIndex" @click="handlePreview(img,item.imgArr)" :src="img">
              </span><br v-if="item.imgUrl!=null && item.imgUrl!=''">
              <span v-if="item.videoUrl!=null && item.videoUrl!=''">
                视频：<br>
                <video style="width: 100px;height: 150px;margin-right: 5px;margin-bottom: 10px" :src="v" v-for="(v,vIndex) in item.videoArr" :key="vIndex" @click="play(v)"></video>
              </span>
            </div>
            <div>
              <div style="float: left;">
                <span>验收人：{{item.createBy }}</span>
              </div>
              <div style="float: right;margin-right: 20px">
                <a-popconfirm title="确定撤销吗?" @confirm="() => revokeProjectAccept(item.id)">
                  <a v-if="item.acceptResult !=2">撤销</a>
                </a-popconfirm>
                <a-divider type="vertical"/>
                <a-popconfirm title="确定删除吗?" @confirm="() => deleteProjectAccept(item.id)">
                  <a>删除</a>
                </a-popconfirm>
              </div>
            </div>
          </a-card>
        </a-timeline-item>
      </a-timeline>
    </a-drawer>


    
    <add-project-and-accept-modal ref="addProjectAndAcceptModal" @ok="modalFormOk"></add-project-and-accept-modal>
  </div>
</template>
<script>
  import {deleteAction,postAction,putAction, getAction,getFileAccessHttpUrl} from '@/api/manage'
  import addProjectAndAcceptModal from "./modules/addProjectAndAcceptModal"
  import { ImagePreview } from 'vant';
  export default {
    name: "projectCheckAndAccept",
    components:{
      addProjectAndAcceptModal,
    },
    props: {
      customerId: {
        required: true,
        default: 0
      },
    },
    data() {
      return {
        visible: false,
        currentAcceptType: 0,
        projectAndAcceptList:[],
        projectAcceptRecords:[],

        url: {
          list: "/ghCustomerProjectAndAccept/list",
          queryList: '/ghCustomerProjectAndAccept/queryList',
          delete: "/ghCustomerProjectAndAccept/delete",
          edit: "/ghCustomerProjectAndAccept/edit",
          sendSms: "/ghCustomerProjectAndAccept/sendSms",
        },
      }
    },
    methods: {
      initData(){
        getAction(this.url.list,{
          customerId: this.customerId
        }).then((res)=>{
          if (res.success){
            this.projectAndAcceptList = res.result;
          }
        })
      },
      onClose() {
        this.visible = false;
      },
      revokeProjectAccept(projectAcceptId){
        putAction(this.url.edit, {
          id: projectAcceptId,
          acceptResult: 2
        }).then((res)=>{
          if (res.success){
            this.$message.success(res.message);
            this.getAcceptRecord(this.currentAcceptType);
            this.initData();
          }
        });
      },
      deleteProjectAccept(projectAcceptId){
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        deleteAction(this.url.delete, {
            id: projectAcceptId
          }).then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.getAcceptRecord(this.currentAcceptType);
            this.initData();
          } else {
            this.$message.warning(res.message);
          }
        });
      },
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      addProjectAccept(accept_type,accept_name){
        this.$refs.addProjectAndAcceptModal.acceptType = accept_type;
        this.$refs.addProjectAndAcceptModal.customerId = this.customerId;
        this.$refs.addProjectAndAcceptModal.title = accept_name;
        this.$refs.addProjectAndAcceptModal.visible = true;
      },
      acceptRecord(accept_type){
        this.visible = true;
        this.currentAcceptType = accept_type;
        this.getAcceptRecord(accept_type);
      },
      getAcceptRecord(accept_type) {
        if (typeof (accept_type) == "undefined" || accept_type == null || accept_type == '') {
          accept_type = 1;
        }
        getAction(this.url.queryList,{
          customerId: this.customerId,
          acceptType: accept_type
        }).then((res)=>{
          if (res.success){
            this.projectAcceptRecords = res.result;
          }
        })
      },
      modalFormOk(){
        this.initData();
      },
      async handlePreview(url,imageArr) {
        ImagePreview([url])
      },
      play(videoUrl){
        window.open(videoUrl)
      },
      sendSms(record){
        let params = {};
        params = record;
        postAction(this.url.sendSms,params).then((res)=>{
          if (res.success){
            this.$message.success(res.message)
          }else {
            this.$message.error(res.message)
          }
        })
      },
      openQRCode(qrCodeUrl){

      },
    },
    created() {
      this.initData();
      //this.acceptRecord();
      // this.acceptRecord(-1,'全部验收记录');
    },
  }
</script>

<style scoped>
  span{
    padding: 5px;
  }
  .img-style /deep/ .ant-modal-content{
    background-color:rgba(0,0,0, 0) !important;
    box-shadow: none;

  }
</style>